<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>fir.im 3D 盒子</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    .box-container {
      height: 100%;
      background: #414859;
      padding: 30px;
    }

    .box {
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-perspective: 1200px;
      perspective: 1200px;
    }

    .box,
    .box .side {
      width: 120px;
      height: 120px;
      display: inline-block;
    }

    .box {
      z-index: 10;
      margin-top: 100px;
      text-align: center;
      font-size: 0;
      opacity: 1;
      /*等下要改成为0*/
      -webkit-transform: translateY(-300px) rotateY(-36deg) rotateX(-15deg) rotateZ(10deg);
      transform: translateY(-300px) rotateY(-36deg) rotateX(-15deg) rotateZ(10deg);
      /*background: red;*/
      -webkit-transition: all .3s;
      transition: all .3s;
    }

    .animate-in .box {
      -webkit-transform: translateY(0px) rotateY(-36deg) rotateX(-15deg) rotateZ(10deg);
      transform: translateY(-0px) rotateY(-36deg) rotateX(-15deg) rotateZ(10deg);
    }

    .box .side {
      position: absolute;
      z-index: 38;
      border: 1px solid #3f515f;
      background-color: #0390A1;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

    .box .left {
      right: 100%;
      height: 110px;
      border-top: 2px solid #3f515f;
      -webkit-transform: rotateY(-90deg);
      transform: rotateY(-90deg);
      -webkit-transform-origin: right;
      transform-origin: right;
    }

    .box .front {
         left: 0;
         height: 110px;
         border-top: 1px solid #3f515f;
         color: #fff;
         font-size: 67px;
         line-height: 120px;
         -webkit-transform-origin: right top;
         transform-origin: right top;
     }

    .box .right {
      left: 100%;
      padding: 12px 0 0 12px;
      height: 99px;
      color: #414859;
      text-align: left;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 700;
      font-size: 20px;
      line-height: 1.2;
      -webkit-transform: rotateY(90deg);
      transform: rotateY(90deg);
      -webkit-transform-origin: left top;
      transform-origin: left top;
      font-family: Arial, sans-serif;
    }

    .box .top {
      position: absolute;
      top: -120px;
      left: 0;
      box-sizing: border-box;
      background-color: transparent;
      font-size: 0;
      -webkit-transform: rotateX(90deg);
      transform: rotateX(90deg);
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
    }

    .box .back {
        /*background: transparent;*/
        position:absolute;
        /*比其它面都低一点， front 比back 更在前端*/
        z-index:37;
        left: 0;
        height: 110px;
        -webkit-transform: translateZ(-120px);
        transform: translateZ(-120px);
    }

    .box .top .lid-left,
    .box .top .lid-right {
      display: inline-block;
      box-sizing: border-box;
      width: 50%;
      height: 120px;
      background-color: #0390A1;
      transition: all .25s;
    }
    .box .top .lid-left {
      -webkit-transform-origin:left;
      transform-origin:left;
    }
    .box .top .lid-right {
      -webkit-transform-origin:right;
      transform-origin:right;
    }
    .box-opened.box .top .lid-left{
      -webkit-transform: rotateY(120deg);
      transform: rotateY(-120deg);
    }
    .box-opened.box .top .lid-right{
      -webkit-transform: rotateY(126deg);
      transform: rotateY(126deg);
    }
  </style>
</head>

<body>
  <div class="box-container">
    <div class="box">
      <div class="side left"></div>
      <div class="side top">
        <div class="lid-left"></div>
        <div class="lid-right"></div>
      </div>
      <div class="side front">
        <i class="icon-udid"></i>
      </div>
      <div class="side right">
        Get<br>UDID
      </div>
      <div class="side back"></div>
    </div>
  </div>
  <script>
    const boxContainer = document.querySelector('.box-container');
    const box = document.querySelector('.box');
    setTimeout(function() {
      boxContainer.classList.add('animate-in');
    },1000);
    setTimeout(function(){
      box.classList.add('box-opened');
    },2000);
  </script>
</body>

</html>